<template>
	<view class="index p10">
		<!--简洁 -->
		<view class="f-1 bff1 box">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="加料组名称:" prop="name" ref="item1" labelWidth="100px" :required="true" borderBottom>
					<u--input placeholder="请输入加料组名称" border="none" v-model="form.name" placeholderClass="init"
						:customStyle="{padding:' 15px 10px ',background:'#fff',borderRadius:'16rpx'}"></u--input>
				</u-form-item>
				<category ref="categoryRef" ></category>
				<u-form-item label="规格组:" prop="attr_ids" ref="item1" labelWidth="100px" :required="true" borderBottom>
					<scroll-view class="scroll f-1 bf8 db" scroll-y="true">
						<view>
							<checkbox-group class="uni-list" @change="checkboxChange">
								<label class="uni-list-cell uni-list-cell-pd flex mt10" v-for="item in list"
									:key="item.id">
									<view>
										<checkbox :value="item.id" :checked="item.checked"></checkbox>
									</view>
									<view class="flex">{{item.name}}<text>
											<u-tag v-if="item.is_sku==0" class="rijianju" text="非加价" type="error" mode="light" plain size="mini"/>
											<u-tag v-if="item.is_sku==1" mode="light" text="加价" type="success" plain size="mini"/>
										</text></view>
								</label>
							</checkbox-group>
						</view>
					</scroll-view>
				</u-form-item>
			</u--form>
		</view>

		<!-- 按钮 -->
		<view class="mt10">
			<u-button type="primary" :loading="loading" :customStyle="{color:'#000'}" :plain="true" text="确定"
				color="#0055ff" @click="submit()">
			</u-button>
		</view>
	</view>
</template>

<script>
	import category from "@/components/category/category.vue";
	export default {
		components: {
			category
		},
		data() {
			return {
				form: {
					name: '',
					category_one_id: '',
					category_two_id: '',
					category_three_id: '',
					attr_ids: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入加料组名称',
						trigger: ['blur'],
					}, ],
				},
				addAndEditType: 0,
				info_id: '',
				loading: false,
			}
		},
		onLoad(option) {
			if (option.id) {
				this.info_id = option.id;
			}
			this.getjialioapinList();
		},
		watch: {

		},
		methods: {
			async getInfo() {
				let {
					code,
					data,
					msg
				} = await this.beg.request({
					url: '/admin/product.Spu/getInfo',
					method: 'POST',
					data: {
						id: this.info_id,
					},
				})
				if (code == 1) {
					data.attr_ids = data.attr_ids.split(',');
					let attr_ids = [];
					data.attr_ids.forEach((v) => {
						this.list.forEach((vv) => {
							if (v == vv.id) {
								attr_ids.push(vv.id);
								vv.checked = true;
							}
						})
					})
					data.attr_ids = attr_ids;
					this.form = data;
					this.$refs.categoryRef.category_one_id=this.form.category_one_id;
					this.$refs.categoryRef.category_two_id=this.form.category_two_id;
					this.$refs.categoryRef.category_three_id=this.form.category_three_id;
					
					this.$refs.categoryRef.getcategory(this.form.category_one_id, 2);
					this.$refs.categoryRef.getcategory(this.form.category_two_id, 3);
				} else {
					uni.$u.toast(msg)
				}
			},
			checkboxChange(e) {
				this.form.attr_ids = e.detail.value;
			},
			async getjialioapinList() {
				let {
					data: {
						data
					}
				} = await this.beg.request({
					url: '/admin/product.Attr/index',
					method: 'POST',
					data: {
						page: 1,
						limit: 200,
						is_deleted: 0
					},
				})
				data.forEach((val) => {
					val.checked = false;
				})
				this.list = data;
				if (this.info_id != '') {
					this.getInfo();
				}

			},
			submit() {
				this.form.category_one_id=this.$refs.categoryRef.category_one_id;
				this.form.category_two_id=this.$refs.categoryRef.category_two_id;
				this.form.category_three_id=this.$refs.categoryRef.category_three_id;
				if (this.form.attr_ids.length == 0) {
					uni.$u.toast('请选择规格组')
					return;
				}
				if(this.form.category_three_id==''){
					uni.$u.toast('请检查品类选择是否正确')
					return;
				}
				this.$refs.uForm.validate().then(res => {
					let data = {};
					Object.assign(data, this.form);
					let attr_ids = [];
					this.list.forEach((v) => {
						this.form.attr_ids.forEach((vv) => {
							if (v.id == vv) {
								attr_ids.push(v.id);
							}
						})
					})
					data.attr_ids = attr_ids.join(',');
					this.postData(data);
				}).catch(errors => {
					uni.$u.toast('请填写完整的信息')
				})
			},
			async postData(data) {
				this.loading = true;
				let {
					code,
					msg
				} = await this.beg.request({
					url: '/admin/product.Spu/save',
					method: 'POST',
					data: data,
				})
				if (code == 1) {
					uni.$u.toast(msg);
					setTimeout(() => {
						this.returnIndex();
					}, 1000)
				} else {
					this.loading = false;
					uni.$u.toast(msg)
				}

			},
			//返回
			returnIndex() {
				this.loading = false;
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		padding: 20rpx;
		line-height: 1.5;
		position: relative;
		margin-top: 20rpx;
		border-radius: 20rpx;



		.prid {
			font-weight: bold;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.jiao {
				right: 10rpx;

				.jiaohang {
					display: flex;
					align-items: center;

					.rijianju {
						margin-right: 10rpx;
					}
				}
			}
		}

		.prod {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}

		.prname {
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			width: 20%;
			text-align: right;
		}
	}

	.scroll {
		height: 50vh;
		background-color: #fff;
	}

	/deep/.u-form-item__body {
		padding: 0px;
	}
</style>